<!--
 * @Author: 刘晟勇
 * @Date: 2021-10-15 15:28:14
 * @LastEditTime: 2021-10-22 17:25:30
 * @Description: 商品详情
-->
<template>
  <div class="product-detail">
    <!-- 头部区域 -->
    <HeaderNav class="detail-nav" :goTarge="goback">
      <template #center>
        <div class="nav-list">
          <span
            :class="{ active: currentNav === index }"
            v-for="(item, index) in navList"
            :key="index"
            @click="toggleNav(index)"
          >
            <i
              class="iconfont"
              :class="{ 'icon-location': currentNav === index }"
            ></i
            >{{ item.title }}
          </span>
        </div>
      </template>
    </HeaderNav>
    <!-- 轮播图 -->
    <section class="product-focus">
      <van-swipe
        :autoplay="3000"
        indicator-color="white"
        class="swiper-container"
      >
        <van-swipe-item
          v-for="(item, index) in productObj.swiperImgUrl"
          :key="index"
        >
          <img :src="item" class="swiper_img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </section>
    <!-- 详情信息 -->
    <section class="detail-info">
      <p class="detail-info-name">
        {{ productObj.name }}
      </p>
      <p class="detail-info-subtitle">{{ productObj.subtitle }}</p>
      <div>
        <span class="detail-info-price">￥{{ productObj.price }}</span>
        <span class="detail-info-stock">库存{{ productObj.stock }}件</span>
      </div>
    </section>
    <!-- 商品详情 -->
    <section
      class="detail-content"
      ref="detailContent"
      id="content"
      v-if="productObj.detail"
    >
      <p class="detail-gap"></p>
      <ul>
        <li>概述</li>
        <li>参数</li>
        <li>安装服务</li>
        <li>常见问题</li>
      </ul>
      <div v-html="productObj.detail"></div>
    </section>
    <!-- 商品推荐 -->
    <section ref="detailRecommend" v-if="isLogin">
      <ProductRecommend title="商品推荐" />
    </section>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/shopcart" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="showGoodSku"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="showGoodSku"
      />
    </van-goods-action>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="sku.goods_info"
      :goods-id="productId"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
// 公共组件的引用
import HeaderNav from "@/components/header-nav.vue";
import ProductRecommend from "@/components/product-recommend.vue";

// 导入混入api方法
import { getProductDetail } from "@/api/product-list.js";
import { changeShopCartList } from "@/api/auth";

export default {
  name: "ProductDetail",
  components: {
    HeaderNav,
    ProductRecommend,
  },
  data() {
    return {
      currentNav: 0,
      navList: [
        {
          title: "商品",
          type: "product",
        },
        {
          title: "商品详情",
          type: "detail",
        },
        {
          title: "商品推荐",
          type: "recommend",
        },
      ],
      productObj: {},
      productDetail: "",
      show: false,
      quotaUsed: 0,
    };
  },
  computed: {
    productId() {
      return this.$route.params.id;
    },
    sku() {
      return {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: this.productObj.swiperImgUrl
                  ? this.productObj.swiperImgUrl[0]
                  : "", // 规格类目图片，只有第一个规格类目可以定义图片
              },
              {
                id: "2",
                name: "蓝色",
                imgUrl: this.productObj.swiperImgUrl
                  ? this.productObj.swiperImgUrl[1]
                  : "",
              },
            ],
            // largeImageMode: true, //  是否展示大图模式
          },
        ],
        goods_info: {
          price: this.productObj.price,
          title: "测试商品",
          picture: this.productObj.swiperImgUrl
            ? this.productObj.swiperImgUrl[0]
            : "",
        },
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            price: this.productObj.price * 100, // 价格（单位分）
            stock_num: +this.productObj.stock, // 当前 sku 组合对应的库存
          },
          {
            id: 2260, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            price: this.productObj.price * 100, // 价格（单位分）
            stock_num: +this.productObj.stock, // 当前 sku 组合对应的库存
          },
        ],
        price: this.productObj.price, // 默认价格（单位元）
        stock_num: +this.productObj.stock, // 商品总库存
        collection_id: 2259, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      };
    },
    isLogin() {
      if (sessionStorage.isLogin === 'true') {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    getProductDetail({ id: this.productId }, (data) => {
      let targe = {};
      targe.id = data.id;
      targe.detail = data.detail;
      // 获取轮播图片
      if (!data.subImages) {
        let swiperImg = data.imageHost + data.mainImage;
        targe.swiperImgUrl = [swiperImg];
      } else {
        let swiperImg = data.subImages.split(",");

        targe.swiperImgUrl = swiperImg.map((img) => {
          return data.imageHost + img;
        });
      }
      targe.name = data.name;
      targe.subtitle = data.subtitle;
      targe.price = data.price;
      targe.stock = data.stock;
      this.productObj = targe;
    })
    window.scroll(0, 0)
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    toggleNav(index) {
      if (index === 0) {
        window.scroll({
          top: 0
        });
      } else if (index === 1) {
        window.scroll({
          top: this.$refs.detailContent.offsetTop - 50
        });
      } else {
        if (!this.isLogin) {
          this.$router.push('/login')
          return
        }
        window.scroll({
          top: this.$refs.detailRecommend.offsetTop - 50
        });
      }
      this.currentNav = index;
    },
    onBuyClicked(skuData) {},
    onAddCartClicked(skuData) {
      const params = {
        productId: skuData.goodsId,
        count: skuData.selectedNum,
      };
      changeShopCartList(params, () => {
        this.show = false;
        this.$router.push("/shopcart");
      });
    },
    showGoodSku() {
      if (sessionStorage.isLogin === 'true') {
        this.show = true
      } else {
        this.$router.push('/login')
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.product-detail {
  width: 100%;
  // 头部区域
  .detail-nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 88px;
    padding: 0 20px;
    line-height: 88px;
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;

    i {
      font-size: 50px;
      color: #000;
    }

    div span {
      padding: 0 20px;
      font-size: 28px;

      &.active {
        color: $red;
      }

      .iconfont {
        padding-right: 8px;
        font-size: 28px;
        color: $red;
      }
    }
  }
  // 轮播图
  .product-focus {
    margin-top: 88px;

    .swiper-container {
      .swiper_img {
        width: 100%;
        height: 700px;
      }
    }
  }
  // 详情信息
  .detail-info {
    width: 100%;
    padding: 20px 30px;
    font-size: 30px;
    box-sizing: border-box;

    .detail-info-name {
      font-size: 40px;
      color: #333;
    }

    .detail-info-subtitle {
      padding: 10px 0;
      font-size: 28px;
      color: #999;
    }

    div {
      @include fj;
      height: 70px;
      line-height: 80px;
      padding: 10px 0;
      font-size: 32px;
      color: #999;

      .detail-info-price {
        color: $red;
        font-size: 44px;
      }
    }
  }
  // 商品详情
  .detail-content {
    width: 100%;

    .detail-gap {
      width: 100%;
      height: 20px;
      background: #eee;
    }

    ul {
      @include fj;
      width: 100%;
      margin: 20px 0;

      li {
        flex: 1;
        padding: 10px 0;
        text-align: center;
        font-size: 30px;
        border-right: 1px solid #999;
        box-sizing: border-box;

        &:last-child {
          border-right: none;
        }
      }
    }

    div {
      width: 100%;
      overflow: hidden;

      p {
        width: 100%;
        font-size: 40px;
        text-align: center;
      }

      & /deep/ img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
